<!-- 店铺内订单组件 -->
<template>
  <view>
    <!--  -->
    <view class="order-section">
      <view class="shop-order">
        <view class="order-inner-box">
          <view class="order-time">
            <text>第二次下单</text>
            <text>下单成功坐等开吃 10:20</text>
          </view>
          <view class="order-add">
            <text>还有未点美食？添加</text>
            <image :src="asyncImgs.alipay.right_grey_arrow"></image>
          </view>
          <view class="good-list">
            <view class="good-item">
              <view class="good-item-info">
                <image src="" mode=""></image>
                <view class="info-box">
                  <view class="name">香辣鸡排保</view>
                  <view class="num">x1</view>
                </view>
              </view>
              <view class="item-price">
                <text>￥</text>
                <text>12.9</text>
              </view>
            </view>
          </view>
        </view>
        <view class="order-total">
          <view class="total-num"> 共选<text>23</text>份 </view>
          <view class="total-price"> 小计￥ <text>69.7</text> </view>
        </view>
      </view>
    </view>

    <view class="remark-box">
      <view class="label">备注</view>
      <u-input v-model="remark" type="text" placeholder="请输入备注" />
    </view>

    <view class="foot-section">
      <view class="foot-box">
        <view class="price">
          <text>合计：￥</text>
          <text>133.7</text>
        </view>
        <view class="btn">去结算</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    mealType: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      remark: "",
    };
  },
  created() {},
  methods: {
    handleConfirmBtn() {
      let choosed = {
        people: this.peopleConfig[this.activePeople] || "0",
        day: this.orderDay[this.activeDay] || "0",
        time: this.orderTimes[this.activeTime] || "0",
        chooseRoom: this.chooseRoom,
        activePeople: this.activePeople,
        activeDay: this.activeDay,
        activeTime: this.activeTime,
      };
      this.$emit("handleConfirmBtn", { data: choosed });
    },
    addGoods() {
      this.$utils.toUrl(
        `/alipay-order/orderMeal/orderMeal?type=addGoods`,
        "redirectTo"
      );
    },
  },
};
</script>

<style lang="less" scoped>
.order-section {
  width: 93.6vw;
  background: #ffffff;
  border-radius: 2.13vw;
  margin: 3.2vw auto 0;
  .shop-order {
    padding: 4vw 3.2vw;
    .order-inner-box {
      border-bottom: 0.13vw solid #e5e5e5;

      .order-time {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 3.73vw;
        font-weight: 400;
        line-height: 4.27vw;
        color: #999999;
        margin-bottom: 3.73vw;
        text:last-child {
          font-size: 3.2vw;
          color: #ff7800;
        }
      }
      .order-add {
        display: flex;
        align-items: center;
        font-size: 3.73vw;
        font-weight: 400;
        line-height: 4.27vw;
        color: #fd4b32;
        image {
          width: 1.87vw;
          height: 3.2vw;
          background-size: 100% 100%;
          display: block;
          margin-left: 1.33vw;
        }
      }
      .good-list {
        margin-top: 3.2vw;
        .good-item {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          margin-bottom: 3.2vw;
          .good-item-info {
            display: flex;
            align-items: flex-start;
            image {
              width: 13.33vw;
              height: 13.33vw;
              background-color: #f9f9f9;
              background-size: 100% 100%;
              border: 0.13vw solid rgba(112, 112, 112, 0.2);
              border-radius: 0.8vw;
              display: block;
              margin-right: 2.13vw;
            }
            .info-box {
              font-size: 3.73vw;
              font-weight: 600;
              line-height: 4.27vw;
              color: #191919;
              .num {
                font-size: 3.2vw;
                font-weight: 400;
                color: #999999;
                margin-top: 0.53vw;
              }
            }
          }
          .item-price {
            font-size: 4.27vw;
            font-weight: 600;
            line-height: 4.27vw;
            color: #191919;
            text:first-child {
              font-size: 3.2vw;
            }
          }
        }
      }
    }
    .order-total {
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      margin-top: 3.2vw;
      .total-num {
        font-size: 3.73vw;
        font-weight: 400;
        line-height: 4.27vw;
        color: #191919;
        margin-right: 3.2vw;
        text {
          color: #fd4b32;
        }
      }
      .total-price {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        font-size: 3.73vw;
        font-weight: 600;
        line-height: 4.27vw;
        color: #191919;
        text {
          font-size: 6.4vw;
        }
      }
    }
  }
}
.remark-box {
  width: 93.6vw;
  background: #ffffff;
  border-radius: 2.13vw;
  margin: 3.2vw auto 0;
  padding: 4vw 3.2vw;
  font-size: 3.73vw;
  line-height: 4.27vw;
  color: #191919;
  display: flex;
  align-items: center;
  .label {
    font-weight: 600;
    margin-right: 3.2vw;
  }
}

.foot-section {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 211;
  height: 13.07vw;
  background: #ffffff;
  .foot-box {
    width: 100%;
    padding: 1.07vw 3.2vw;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .price {
      font-size: 5.33vw;
      font-weight: 600;
      line-height: 4.27vw;
      color: #fd4b32;
      margin-right: 3.2vw;
      display: flex;
      align-items: flex-end;
      text:first-child {
        font-size: 3.2vw;
      }
      text:last-child{
          line-height: 5.33vw;
      }
    }
    .btn {
      width: 29.33vw;
      height: 10.67vw;
      background: #1fb6fd;
      border-radius: 8vw;
      line-height: 10.67vw;
      font-size: 4.27vw;
      font-weight: 600;
      color: #ffffff;
      text-align: center;
    }
  }
}
</style>
